<template>
  <a-drawer
      title="我的上课提醒"
      placement="right"
      :visible="show"
      @close="close"
      width="512"
  >
    <p style="color: red">已经开启的上课提醒会在上课前一天晚上 <b>22:00</b> 通过邮箱提醒上课</p>
    <br/>
    <a-row class="reminder" v-for="(reminder, index) in reminders" :key="index">
      <a-col span="18" class="reminder-class">
        <a-tooltip placement="left">
          <template slot="title">
            {{ reminder.name }}
          </template>
          {{ reminder.name }}
        </a-tooltip>
      </a-col>
      <a-col span="6">
        <span @click="deleteReminder(reminder.id)" class="cancel-reminder">取消提醒</span>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script>
import {getReminders, deleteReminder} from "@/api/courses/reminder";

export default {
  name: "myReminder",
  props: {
    show: Boolean
  },
  data() {
    return {
      reminders: []
    }
  },
  methods: {
    loadReminderCLass() {
      // 获取我的上课提醒
      getReminders().then(res => {
        if (res.result) {
          this.reminders = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    deleteReminder(courseId) {
      deleteReminder(courseId).then(res => {
        if (res.result) {
          this.$message.success("删除上课提醒成功");
        } else {
          this.$message.error(res.msg);
        }
        this.loadReminderCLass();
      })
    },
    close() {
      this.$emit("close");
    }
  },
  watch: {
    show(old) {
      if (old) {
        this.loadReminderCLass();
      }
    }
  }
}
</script>

<style scoped>
.cancel-reminder {
  font-size: small;
  color: blue;
  cursor: pointer;
}

.reminder-class {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reminder:first-child {
  border-top: 0;
}

.reminder {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>